
<div class="container-fluid ">
      <div class="row">
        <h3>考核基本信息</h3>
        <div class="page-header">
            <table style="width:100%;">
                <tr>
                    <td width="25%">考核任务名：20170404收费站稽查任务</td>
                    <td width="25%">考核人：李娟</td>
                    <td width="25%">考核时间： 8:20-10:30</td>
                    <td width="25%">考核视频数：2</td>
                </tr>
            </table>
        </div>
      </div>
      <div class="row">
        <h3>考核任务流程</h3>
        <div>
            <div class="col-sm-2" style="text-align:center;">
                <div class="row">
                    <label for="exampleInputAccount1">2017-05-12 10:00</label>
                </div>
                <div class="row">
                    <label for="exampleInputAccount1">任务生成</label>
                </div>
                <div class="row" style="text-align:center;font-size:20px;">
                    <i class="icon icon-circle"></i>
                </div>
            </div>
            <div class="col-sm-1" style="text-align:center;">
                <div class="row">
                    <label for="exampleInputAccount1"></label>
                </div>
                <div class="row" style="text-align:center;font-size:20px;">
                    <i class="icon icon-long-arrow-right"></i>
                </div>
            </div>    
            <div class="col-sm-2" style="text-align:center;">
                <div class="row">
                    <label for="exampleInputAccount1">2017-05-12 11:00</label>
                </div>
                 <div class="row">
                    <label for="exampleInputAccount1">任务稽查</label>
                </div>
                <div class="row" style="font-size:20px;">
                    <i class="icon icon-circle"></i>
                </div>
            </div>
        </div>
      </div>
      <hr>
      <div class="row">
        <h3>考核详细内容</h3>
        <div>
            <div class="datatable" data-checkable="true" data-sortable="true"></div>
        </div>
      </div>
</div>
<script>
    $(document).ready(function() {
        
        // 使用data参数更新数据：
        $('.datatable').datatable( {
            checkable:false,
            sortable:false,
            data: {
                cols: [
                    {width: 30, text: '序号', type: 'number', flex: true, colClass: 'text-center'},
                    {width: 100, text: '考核内容', type: 'string', flex: true, sort: 'down'},
                    {width: 30, text: '扣分', type: 'string', flex: true, colClass: ''},
                    {width: 200, text: '录像截图', type: 'string', flex: true, colClass: ''},
                    {width: 100, text: '操作', type: 'string', flex: true, colClass: ''}
                ],
                rows: [
                    {checked: false, data: [1, '未按规定收取过路费，着装不规范','10','<a href="../../images/img4.jpg" class="lightbox-toggle" data-toggle="lightbox" data-group="image-group-1"><img src="../../images/img4.jpg" class="img-rounded" alt="" width="50px"></a><a href="../../images/img4.jpg" class="lightbox-toggle" data-toggle="lightbox" data-group="image-group-1"><img src="../../images/img4.jpg" class="img-rounded" alt="" width="50px"></a><a href="../../images/img4.jpg" class="lightbox-toggle" data-toggle="lightbox" data-group="image-group-1"><img src="../../images/img4.jpg" class="img-rounded" alt="" width="50px"></a>',' <a href="#" data-toggle="modal" data-target="#myModal"><i class="icon icon-edit"></i>修改 </a><a href="#"><i class="icon icon-remove-circle"></i>删除</a>']},
                    {checked: false, data: [2, '服务区垃圾房应封闭，房内垃圾入袋，地面无污水','20','<a href="../../images/img4.jpg" class="lightbox-toggle" data-toggle="lightbox" data-group="image-group-1"><img src="../../images/img4.jpg" class="img-rounded" alt="" width="50px"></a> ','<a href="#" data-toggle="modal" data-target="#myModal"><i class="icon icon-edit"></i>修改 </a><a href="#"><i class="icon icon-remove-circle"></i>删除</a>']},
                    // 更多数据
                ]
            }
        });
        $('a.lightbox-toggle').lightbox();
    });
    </script>
